<template>
  <div>
    <Row class="bench_search">
      <Col span="6">
      <span>Ip地址: </span>
      <Input v-model="searchList.getway_ip" clearable style="width: 70%;"></Input>
      </Col>
      <Col span="6">
      <span>网关设置: </span>
      <Select v-model="searchList.getway_site" clearable style="width: 70%;">
        <Option v-for="item in getwaySiteType" :value="item.value" :key="item.value">{{item.label}}
        </Option>
      </Select>
      </Col>
      <Col span="6">
      <span>类别分组: </span>
      <Select v-model="searchList.getway_xy" clearable style="width: 70%;">
        <Option v-for="item in getwayXyType" :value="item.value" :key="item.value">{{item.label}}
        </Option>
      </Select>
      </Col>
      <Col span="6">
      <Button type="primary" @click="onSearch" class="new-btn-sty1">查询</Button>
      <Button type="primary" @click="add" class="new-btn-sty2">添加</Button>
      </Col>
    </Row>

    <Table :columns="column" :data="tableData.results" :height="offsetHeight" border :loading="loading">
      <template slot-scope=" { row }" slot="action">
        <Row style="margin-top:5px">
           <Button type="primary" size="small" @click="edit(row)" style="margin-right: 5px">
          {{loginName === row.create_by?'修改':'查看'}}</Button>
        <Button type="error" size="small" @click="onDel(row.id)" v-if="loginName === row.create_by">删除</Button>
        </Row>
       <Row style="margin-top:5px;margin-bottom:5px;">
          <Button type="error" size="small" @click="wxjg(row)" style="margin-right: 5px">威胁监管</Button>
          <Button type="warning" size="small" @click="jzgj(row)" >集中告警</Button>
        </Row>
      </template>
    </Table>
    <Row type="flex" justify="end">
      <Page :total="tableData.totalRecord" show-sizer @on-change="pageNoChange" @on-page-size-change="pageSizeChange" />
    </Row>
    <!-- <Page :total="100"  /> -->
    <Modal v-model="show" title="网关信息" width="50">
      <info @cancel="cancel" @init="init" :form-list="formList" :getway-xy-type="getwayXyType"
        :getway-site-type="getwaySiteType" :switch="this.switch"></info>
      <div slot="footer"></div>
    </Modal>
  </div>
</template>
<script>
import { getwayPageList, getwayDel, jzfocus, wxAlarm } from '@/api/device'
import { getUserInfo } from '@/api/user'
import { getDictList } from '@/api/eventlist'
import Info from './info.vue'
export default {
  name: 'DeviceGetway',
  components: {
    Info
  },
  props: {

  },
  data () {
    return {
      loginName: '',
      offsetHeight: document.documentElement.clientHeight - 310,
      loading: false,
      saveLoading: false,
      searchList: {},
      tableData: {
      },
      pageNo: 1,
      pageSize: 10,
      column: [
        {
          title: 'Ip地址',
          key: 'getway_ip',
          align: 'center',
          width: 150
        },
        {
          title: '子网掩码',
          key: 'getway_child',
          align: 'center',
          width: 150
        },
        {
          title: '网关设置',
          key: 'getway_site_name',
          align: 'center',
          width: 100
        }, {
          title: '类别分组',
          key: 'getway_xy_name',
          align: 'center',
          width: 100
        },
        {
          title: '物理地址',
          key: 'getway_adress',
          align: 'center',
          width: 150
        },
        {
          title: '是否在线',
          key: 'getway_isonline',
          align: 'center',
          width: 100
        },
        {
          title: '威胁监管',
          key: 'getway_wx',
          align: 'center',
          width: 100
        },
        {
          title: '集中告警',
          key: 'getway_focus',
          align: 'center',
          width: 100
        },
        {
          title: '操作',
          slot: 'action',
          width: 200,
          align: 'center'
        }
      ],
      show: false,
      formList: {},
      getwayXyType: [],
      getwaySiteType: [],
      switch: false
    }
  },
  created () {

  },
  mounted () {
    // 用户信息
    this.userInfo()
    this.dict()
    this.init()
  },
  methods: {
    userInfo () {
      getUserInfo({}).then(res => {
        let data = res.data.data
        if (data) {
          this.loginName = data.loginName
        } else {
          this.$Message.error({
            content: res.data.errmsg
          })
        }
      })
    },
    dict () {
      getDictList({
        type: 'getway_xy'
      }).then(res => {
        let data = res.data.data
        if (data) {
          this.getwayXyType = data.results
        } else {
          this.$Message.error({
            content: '获取字典失败,错误:' + res.data.errmsg
          })
        }
      })
      getDictList({
        type: 'getway_site'
      }).then(res => {
        let data = res.data.data
        if (data) {
          this.getwaySiteType = data.results
        } else {
          this.$Message.error({
            content: '获取字典失败,错误:' + res.data.errmsg
          })
        }
      })
    },
    init () {
      this.loading = true
      getwayPageList({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        ...this.searchList
      }).then(res => {
        let data = res.data.data
        if (data) {
          this.tableData = data
          this.loading = false
        } else {
          this.loading = false
          this.$Message.error({
            content: res.data.errmsg
          })
        }
      })
    },
    onSearch () {
      this.pageNo = 1
      this.pageSize = 10
      this.init()
    },
    add () {
      this.switch = true
      this.formList = {}
      this.show = true
    },
    edit (item) {
      if (this.loginName === item.create_by) {
        this.switch = true
      } else {
        this.switch = false
      }
      this.formList = { ...item }
      this.show = true
    },
    onDel (id) {
      this.$Modal.confirm({
        title: '提示',
        content: '是否删除设备信息',
        loading: true,
        onOk: () => {
          this.onDel1(id)
        },
        onCancel: () => {
          this.loading = false
        }
      })
    },
    wxjg (row) {
      this.$Modal.confirm({
        title: '提示',
        content: '是否修改威胁监管状态',
        loading: true,
        onOk: () => {
          this.wxjg1(row)
        },
        onCancel: () => {
          this.loading = false
        }
      })
    },
    wxjg1 (row) {
      let aaa = row.getway_wx === '是' ? '否' : '是'
      wxAlarm({
        id: row.id,
        getway_wx: aaa
      }).then(res => {
        let data = res.data.data
        if (data) {
          this.init()
          this.$Message.success({
            content: '成功！'
          })
          this.$Modal.remove()
        } else {
          this.$Message.error({
            content: '失败\n' + res.data.errmsg
          })
          this.$Modal.remove()
        }
      })
    },
    jzgj (row) {
      this.$Modal.confirm({
        title: '提示',
        content: '是否修改集中告警状态',
        loading: true,
        onOk: () => {
          this.jzgj1(row)
        },
        onCancel: () => {
          this.loading = false
        }
      })
    },
    jzgj1 (row) {
      let aaa = row.getway_focus === '是' ? '否' : '是'
      jzfocus({
        id: row.id,
        getway_focus: aaa
      }).then(res => {
        let data = res.data.data
        if (data) {
          this.init()
          this.$Message.success({
            content: '成功！'
          })
          this.$Modal.remove()
        } else {
          this.$Message.error({
            content: '失败\n' + res.data.errmsg
          })
          this.$Modal.remove()
        }
      })
    },
    onDel1 (id) {
      getwayDel({
        id: id
      }).then(res => {
        let data = res.data.data
        if (data) {
          this.init()
          this.$Message.success({
            content: '删除成功！'
          })
          this.$Modal.remove()
        } else {
          this.$Message.error({
            content: '删除失败\n' + res.data.errmsg
          })
          this.$Modal.remove()
        }
      })
    },
    cancel () {
      this.show = false
    },
    pageNoChange (pageNo) {
      this.pageNo = pageNo
      this.init()
    },
    pageSizeChange (pageSize) {
      this.pageSize = pageSize
      this.init()
    }
  },
  computed: {

  }
}
</script>
<style lang="less" scoped>
.bench_search {
  margin: 0px 10px 5px;
}
.new-btn-sty {
  margin-right: 5px;
  color: #fff;
  background-color: #235ca7;
  border-color: #235ca7;
  font-weight: 500;
}
.new-btn-sty1 {
  margin-right: 5px;
  color: #fff;
  background-color: #598ed1;
  border-color: #598ed1;
  font-weight: 500;
}
.new-btn-sty2 {
  margin-right: 5px;
  color: #fff;
  background-color: #14a507;
  border-color: #14a507;
  font-weight: 500;
}
</style>